<template>


  <div v-if="user">

    <div style="padding-top: 5px"></div>
    <div class="center">
      <img :alt="user?.username" class="img" :src="user?.avatarUrl?user.avatarUrl:defaultPicture">
    </div>
    <div style="padding-top: 15px"/>



    <van-cell title="昵称"  :value="user.username"  />
    <van-cell title="账户"  :value="user.userAccount" />

    <van-cell title="性别">
      <span v-if="user.gender===1">男</span>
      <span v-if="user.gender===0">女</span>
    </van-cell>

    <van-cell title="电话"  :value="user.phone"  />
    <van-cell title="邮箱" :value="user.email" />
    <van-cell value="点击查看" icon="cluster-o" @click="teams(user.id)" is-link>
      <template #title>
        <span class="custom-title">已加队伍</span>
      </template>
    </van-cell>
    <van-cell title="注册时间"  :value="user.createTime"  />

    <van-cell title="简介" icon="chat-o">
      <template #value>
        <div v-if="user.profile" class="van-multi-ellipsis--l3">
          {{ user?.profile }}
        </div>
        <div v-if="!user.profile" class="van-ellipsis">
          暂无简介
        </div>
      </template>
    </van-cell>

    <van-space style="margin: 13px" direction="vertical" fill>

      <div v-if="loginUser?.id !== user.id">
        <div v-if="!loginUser.userIds.includes(user?.id)">
          <van-button v-if="applyStatus" type="primary" @click="addUser" block>
            添加好友
          </van-button>
        </div>
        <div v-else>
          <van-button type="primary" @click="chatUser" block>联系好友</van-button>
          <div style="padding-top: 10px;"></div>
          <van-button type="danger" @click="deleteFriend" block>删除好友</van-button>
        </div>
      </div>

    </van-space>
    <van-dialog v-model:show="addUserApply" :title="'添加好友：'+user?.username?.slice(0,10)" show-cancel-button
                @confirm="toAddUserApply(user.id)">
      <div style="padding-top:8px"></div>
      <van-field v-model="addUserApplyText"
                 type="text"
                 placeholder="我是...."
                 style="text-align: center;width: 150px;margin-left: 75px;"
      />
      <div style="padding-top:8px "></div>
    </van-dialog>

  </div>
  <copyright/>
</template>

<script setup lang="ts" >
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import myAxios from "../plugins/myAxios.ts";
import {defaultPicture} from "../common/userCommon.ts"
import {getCurrentUser} from "../services/user";
import {UserType} from "../models/user";

const router = useRouter();
const user = ref<UserType>();

const loginUser = ref({})
const route = useRoute();

const addUserApply = ref(false);
const addUserApplyText = ref();
const applyStatus = ref(true)




onMounted(async ()=>{
  const currentUser = await getCurrentUser()
  loginUser.value = currentUser;
  if(currentUser.userIds == null){
    loginUser.value.userIds = [];
  }else{
    loginUser.value.userIds = JSON.parse(currentUser.userIds)
  }
  const showUserId  = route.query.id;
  console.log("-----------------route.query.id----------------",route.query.id);

  //获取用户信息
  const res = await myAxios.get('/user/query',{
    params: {
      showUserId,
    }
  });
  // 异步方法必须添加await才可以拿到数据，否则拿到的是promise对象
  //const  res = await  getCurrentUser();
  if (res){
    user.value = res?.data;
  }else {
    showFailToast('获取用户信息失败');
  }
  //console.log("----user:----", user.value);
  //console.log("----loginUser:----", loginUser.value);
  // console.log("----loginUser.userIds:----", loginUser.value.userIds);

})


const teams = (userId:number) => {
  router.push({
    name: "UserTeamJoin",
    query: {
      userId
    }
  })
}

const chatUser = () => {
  router.push({
    path: "/chat",
    query: {
      id: user.value.id,
      username: user.value.username,
      userType: 1
    }
  })
}
const addUser = async () => {
  addUserApply.value = true
}

const toAddUserApply = async (id: number) => {
  const status = await myAxios.post("/friends/add", {
    "receiveId": id,
    "remark": addUserApplyText.value
  })
  if (status.data) {
    showSuccessToast("申请成功")
  }
}

const deleteFriend = async () => {
  showConfirmDialog({
    message: '请确认是否删除好友?',
  }).then(async () => {
    const deleteFriend = await myAxios.post(`/user/deleteFriend/${user.value.id}`, {})
    if (deleteFriend.data) {
      loginUser.value.userIds = loginUser.value.userIds.filter(id => id !== user.value.id)
      showSuccessToast("删除成功")
    }
  }).catch(() => {
    showSuccessToast("修改成功")
  });

}

</script>

<style scoped>
.img{
  box-shadow: 0 0 14px #00000080;
  border-radius: 20%;
  height: 135px;
  width: 135px;
}
.center{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
